<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git 仓库管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2em;
            margin-bottom: 10px;
        }
        
        .current-branch {
            background: rgba(255,255,255,0.2);
            padding: 10px 20px;
            border-radius: 20px;
            display: inline-block;
            margin-top: 10px;
        }
        
        .content {
            padding: 30px;
        }
        
        .tabs {
            display: flex;
            border-bottom: 2px solid #e0e0e0;
            margin-bottom: 30px;
        }
        
        .tab {
            padding: 15px 30px;
            cursor: pointer;
            border: none;
            background: none;
            font-size: 16px;
            color: #666;
            transition: all 0.3s;
        }
        
        .tab.active {
            color: #667eea;
            border-bottom: 3px solid #667eea;
            font-weight: bold;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 5px;
            font-size: 14px;
            transition: border-color 0.3s;
        }
        
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .form-group textarea {
            resize: vertical;
            min-height: 80px;
        }
        
        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .checkbox-group input[type="checkbox"] {
            margin: 0;
        }
        
        .checkbox-group label {
            margin: 0;
            cursor: pointer;
        }
        
        .btn {
            padding: 12px 30px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        
        .btn-danger {
            background: #e74c3c;
            color: white;
        }
        
        .btn-danger:hover {
            background: #c0392b;
        }
        
        .btn-success {
            background: #27ae60;
            color: white;
        }
        
        .btn-success:hover {
            background: #229954;
        }
        
        .branch-list {
            background: #f8f9fa;
            border-radius: 5px;
            padding: 20px;
            max-height: 500px;
            overflow-y: auto;
        }
        
        .branch-item {
            background: white;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        
        .branch-info {
            flex: 1;
        }
        
        .branch-name {
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        
        .branch-name.current {
            color: #667eea;
        }
        
        .branch-meta {
            font-size: 12px;
            color: #999;
        }
        
        .branch-actions {
            display: flex;
            gap: 10px;
        }
        
        .btn-small {
            padding: 6px 15px;
            font-size: 12px;
        }
        
        .message {
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            display: none;
        }
        
        .message.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .message.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .message.warning {
            background: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }
        
        .conflict-list {
            background: #fff3cd;
            padding: 15px;
            border-radius: 5px;
            margin-top: 15px;
        }
        
        .conflict-item {
            padding: 5px 0;
            color: #856404;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚀 Git 仓库管理系统</h1>
            <p style="margin-top: 10px; opacity: 0.8;">管理多个远程仓库的分支操作</p>
        </div>
        
        <div class="content">
            <div id="message" class="message"></div>
            
            <div class="tabs">
                <button class="tab active" onclick="switchTab('branches')">分支管理</button>
                <button class="tab" onclick="switchTab('merge')">合并分支</button>
                <button class="tab" onclick="switchTab('pull')">拉取分支</button>
                <button class="tab" onclick="switchTab('rollback')">版本回滚</button>
            </div>
            
            <!-- 分支管理 -->
            <div id="branches" class="tab-content active">
                <h2>创建新分支</h2>
                <form id="createBranchForm" style="margin-bottom: 30px;">
                    <div class="form-group">
                        <label>分支名称</label>
                        <input type="text" name="branchName" placeholder="例如: feature/new-feature" required>
                    </div>
                    <div class="form-group">
                        <label>基准分支</label>
                        <select name="baseBranch">
                            <option value="">使用当前分支</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">创建分支</button>
                </form>
                
            </div>
            
            <!-- 合并分支 -->
            <div id="merge" class="tab-content">
                <h2>合并分支</h2>
                <form id="mergeForm">
                    <div class="form-group">
                        <label>源分支（要合并的分支）</label>
                        <select name="sourceBranch" required>
                            <option value="">请选择</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>目标分支（合并到哪个分支）</label>
                        <select name="targetBranch" required>
                            <option value="">请选择</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-success">执行合并</button>
                </form>
                
                <div id="mergeResult" style="margin-top: 20px;"></div>
            </div>
            
            <!-- 拉取分支 -->
            <div id="pull" class="tab-content">
                <h2>拉取远程分支到本地</h2>
                <p style="color: #666; margin-bottom: 20px;">
                    将远程分支拉取到本地目录（D:\my_project\git_test_file），并自动生成 test.properties 文件后推送到远程
                </p>
                <form id="pullForm">
                    <div class="form-group">
                        <label>选择要拉取的分支</label>
                        <select name="branchName" required>
                            <option value="">请选择</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">拉取分支并生成文件</button>
                </form>
                
                <div id="pullResult" style="margin-top: 20px;"></div>
            </div>
            
            <!-- 版本回滚 -->
            <div id="rollback" class="tab-content">
                <h2>版本回滚</h2>
                <form id="rollbackForm">
                    <div class="form-group">
                        <label>目标提交哈希</label>
                        <input type="text" name="targetCommit" placeholder="例如: a1b2c3d..." required>
                    </div>
                    <div class="form-group">
                        <label>回滚模式</label>
                        <select name="resetType">
                            <option value="MIXED">混合模式（保留工作区）</option>
                            <option value="SOFT">软回滚（保留所有更改）</option>
                            <option value="HARD">硬回滚（清空所有更改）</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>回滚原因</label>
                        <textarea name="reason" placeholder="请输入回滚原因..." required></textarea>
                    </div>
                    <button type="submit" class="btn btn-danger">执行回滚</button>
                </form>
            </div>
        </div>
    </div>
    
    <script>
        const API_BASE = '/api/git';
        
        // 显示消息
        function showMessage(text, type = 'success') {
            const messageDiv = document.getElementById('message');
            messageDiv.textContent = text;
            messageDiv.className = `message ${type}`;
            messageDiv.style.display = 'block';
            
            setTimeout(() => {
                messageDiv.style.display = 'none';
            }, 5000);
        }
        
        // 切换标签页
        function switchTab(tabName) {
            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
            
            event.target.classList.add('active');
            document.getElementById(tabName).classList.add('active');
            
            if (tabName === 'branches' || tabName === 'merge' || tabName === 'pull') {
                loadRemoteBranches();
            }
        }
        
        // 加载远程分支
        async function loadRemoteBranches() {
            try {
                const response = await fetch(`${API_BASE}/branches`);
                const data = await response.json();
                
                if (data.code === 200) {
                    const branches = data.data;
                    updateBranchSelects(branches);
                } else {
                    showMessage('加载远程分支失败', 'error');
                }
            } catch (error) {
                console.error('加载远程分支失败:', error);
                showMessage('加载远程分支失败', 'error');
            }
        }
        
            // 更新分支选择器
        function updateBranchSelects(branches) {
            const baseBranchSelect = document.querySelector('select[name="baseBranch"]');
            const sourceBranchSelect = document.querySelector('select[name="sourceBranch"]');
            const targetBranchSelect = document.querySelector('select[name="targetBranch"]');
            const pullBranchSelect = document.querySelector('select[name="branchName"]');
            
            // 更新基准分支选择器
            if (baseBranchSelect) {
                baseBranchSelect.innerHTML = '<option value="">使用当前分支</option>' + 
                    branches.map(b => `<option value="${b.name}">${b.name}</option>`).join('');
            }
            
            // 更新合并分支选择器
            if (sourceBranchSelect) {
                sourceBranchSelect.innerHTML = '<option value="">请选择</option>' + 
                    branches.map(b => `<option value="${b.name}">${b.name}</option>`).join('');
            }
            
            if (targetBranchSelect) {
                targetBranchSelect.innerHTML = '<option value="">请选择</option>' + 
                    branches.map(b => `<option value="${b.name}">${b.name}</option>`).join('');
            }
            
            // 更新拉取分支选择器
            if (pullBranchSelect) {
                pullBranchSelect.innerHTML = '<option value="">请选择</option>' + 
                    branches.map(b => `<option value="${b.name}">${b.name}</option>`).join('');
            }
        }
        
        
        
        
        
        // 创建分支
        document.getElementById('createBranchForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            // 获取分支配置
            const formData = new FormData(e.target);
            const data = {
                branchName: formData.get('branchName'),
                baseBranch: formData.get('baseBranch') || null,
                pushToRemote: true  // 默认推送到远程
            };
            
            try {
                const response = await fetch(`${API_BASE}/branches/with-repo`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });
                
                const result = await response.json();
                
                if (result.code === 200) {
                    showMessage('分支创建成功');
                    e.target.reset();
                } else {
                    showMessage(result.message || '创建失败', 'error');
                }
            } catch (error) {
                showMessage('创建分支失败', 'error');
            }
        });
        
        
        // 合并分支
        document.getElementById('mergeForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const formData = new FormData(e.target);
            const data = {
                sourceBranch: formData.get('sourceBranch'),
                targetBranch: formData.get('targetBranch'),
                pushToRemote: true  // 默认推送到远程
            };
            
            try {
                const response = await fetch(`${API_BASE}/merge`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });
                
                const result = await response.json();
                
                if (result.code === 200) {
                    const mergeResult = result.data;
                    displayMergeResult(mergeResult);
                    
                    // 根据合并结果显示消息
                    if (mergeResult.success) {
                        showMessage('合并成功');
                        loadRemoteBranches(); // 重新加载分支列表
                    } else {
                        showMessage('合并失败: ' + mergeResult.message, 'error');
                    }
                } else {
                    showMessage(result.message || '合并失败', 'error');
                }
            } catch (error) {
                showMessage('合并分支失败', 'error');
            }
        });
        
        // 显示合并结果
        function displayMergeResult(result) {
            const resultDiv = document.getElementById('mergeResult');
            
            if (result.success) {
                resultDiv.innerHTML = `
                    <div class="message success">
                        <strong>合并成功！</strong><br>
                        合并提交: ${result.mergeCommit || 'N/A'}
                    </div>
                `;
            } else if (result.status === 'CONFLICT') {
                resultDiv.innerHTML = `
                    <div class="message error">
                        <strong>合并冲突！</strong><br>
                        存在 ${result.conflictFiles.length} 个冲突文件
                    </div>
                    <div class="conflict-list">
                        <strong>冲突文件列表：</strong>
                        ${result.conflictFiles.map(file => `<div class="conflict-item">${file}</div>`).join('')}
                    </div>
                `;
            } else {
                resultDiv.innerHTML = `
                    <div class="message error">
                        <strong>合并失败：</strong> ${result.message}
                    </div>
                `;
            }
        }
        
        // 回滚
        document.getElementById('rollbackForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const formData = new FormData(e.target);
            const data = {
                targetCommit: formData.get('targetCommit'),
                resetType: formData.get('resetType'),
                reason: formData.get('reason')
            };
            
            if (!confirm(`确定要回滚到提交 ${data.targetCommit} 吗？此操作可能丢失未提交的更改！`)) {
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE}/rollback`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });
                
                const result = await response.json();
                
                if (result.code === 200) {
                    showMessage('回滚成功');
                    e.target.reset();
                    loadBranches();
                } else {
                    showMessage(result.message || '回滚失败', 'error');
                }
            } catch (error) {
                showMessage('回滚失败', 'error');
            }
        });
        
        // 拉取分支
        document.getElementById('pullForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const formData = new FormData(e.target);
            const data = {
                branchName: formData.get('branchName')
            };
            
            if (!confirm(`确定要拉取分支 ${data.branchName} 到本地并生成测试文件吗？`)) {
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE}/pull-branch`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });
                
                const result = await response.json();
                
                if (result.code === 200) {
                    showMessage(result.data || '拉取分支并生成文件成功', 'success');
                    document.getElementById('pullResult').innerHTML = `
                        <div class="message success">
                            <strong>操作成功！</strong><br>
                            ${result.data || '拉取分支并生成文件成功'}
                        </div>
                    `;
                    e.target.reset();
                    loadRemoteBranches(); // 重新加载分支列表
                } else {
                    showMessage(result.message || '拉取失败', 'error');
                    document.getElementById('pullResult').innerHTML = `
                        <div class="message error">
                            <strong>操作失败：</strong> ${result.message || '拉取失败'}
                        </div>
                    `;
                }
            } catch (error) {
                console.error('拉取分支失败:', error);
                showMessage('拉取分支失败', 'error');
                document.getElementById('pullResult').innerHTML = `
                    <div class="message error">
                        <strong>操作失败：</strong> ${error.message}
                    </div>
                `;
            }
        });
        
        // 页面加载时初始化
        window.addEventListener('load', () => {
            loadRemoteBranches();
        });
    </script>
</body>
</html>

